<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <style>
            #fullscreenElement{
                width: 100px;
                height:100px;
                background: #f00;
            }
        </style>
    </head>
    <body>
        <div id="fullscreenElement" onclick="openFullscreen(this)">
            <button onclick="exitFullScreen()">退出全屏</button>
        </div>
    <script type="text/javascript">
        document.querySelector('#fullscreenElement').onclick = function(){
            var element=this;
            console.log(this);
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullScreen();
            }
        }
    //退出全屏方法
    function exitFullScreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
        </script>
    </body>
</html>